<template>
  
     <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>修改学生信息</span>
      <el-button style="float: right; padding: 3px 0" type="text"></el-button>
    </div>
    <div>
      <el-form ref="form" :model="student" label-width="100px" class="add">
        <el-form-item label="学生姓名：">
          <el-input v-model="student.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄：">
          <el-input v-model="student.age"></el-input>
        </el-form-item>

        <el-form-item label="性别：">
          <el-radio v-model="student.gender" label="男">男</el-radio>
          <el-radio v-model="student.gender" label="女">女</el-radio>
        </el-form-item>


        <el-form-item label="班级">
          <el-select v-model="student.classesId" placeholder="请选择">
            <el-option v-for="item in classes" :key="item._id" :label="item.name" :value="item._id">
            </el-option>
          </el-select>
        </el-form-item>



        <el-form-item>
          <el-button type="primary" @click="updateStudent">确认修改</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>

      <!------------------------------------------------- 图片上传 ------------------------------------------->

      <div class="image">
        <el-upload class="avatar-uploader" action="http://47.98.128.191:3000/images/uploadImages"
          :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="student.image" :src="student.image" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>
  </el-card>


 


</template>

<script>
  import {createNamespacedHelpers} from 'vuex';
  const {mapActions} = createNamespacedHelpers('Students');
  const { mapActions:classesActions } = createNamespacedHelpers('Classes');

  export default {
    data() {
      return {
        //-----------------------------------修改的学生信息------------------------------------
        student: {
          _id:'',
          name: '',
          age: '',
          gender: '',
          image: '',
          classesId: '',
          
        },
        //-----------------------------------班级列表信息--------------------------------------
        classes: [],
        //----------------------------------加载图片信息-----------------------------------
        imageUrl: ''

      }
    },
    props:['_id'],
    async mounted() {
      //-----------------------------获取班级列表--------------------------
      this.getClassesList();
      
      //-----------------------------获取需要修改的学生信息---------------------
      this.getStudentsOne()
      

    },
    methods: {
      ...mapActions(['getStudentsById','updateStudents']),
      ...classesActions(['getClasses']),
      //-----------------------------获取班级信息--------------------------
      async getClassesList() {
        const data = await this.getClasses();
        this.classes = data.data.result
      },
      //-----------------------------获取需要修改的学生信息---------------------
      async getStudentsOne(){
          const data = await this.getStudentsById(this._id);
          this.student = data.data;
      },

      //----------------------------确认修改学生信息----------------------------
      async updateStudent() {
        const data = await this.updateStudents(this.student);
        if(data.code){
            this.$message({
              message: '修改成功！',
              type: 'success'
            });
           this.$router.push('/home/studentsList')
          }
      },
      //---------------------------上传图片是否成功------------------------
      handleAvatarSuccess(res, file) {
        if (res.code) {
          this.student.image = 'http://47.98.128.191:3001' + res.data[0]
        }

      },
      //---------------------------上传的图片的限制---------------------------------
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //---------------------------取消修改---------------------------------
      cancel(){
        this.$router.push('/home/studentsList');
      },
    },
  }
</script>

<style scoped>
  .add {
    margin: 50px;
    width: 400px;
  }

  .avatar-uploader {
    border: 1px dotted #ccc;
    width: 178px;
    height: 178px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;

  }
  .box-card{
    position: relative;
  }
  .image {
    position: absolute;
    top: 200px;
    left: 600px;
  }
  .clearfix{
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: 600;
  }
</style>